<template>
  <el-container class="doc-manager-container">
    <!-- 头部 -->
    <el-header class="main-header">
      <img src="../../assets/fonticon/container/active.svg" class="logo" alt="logo"/>
      <div class="header">慧聚face</div>

      <!-- 搜索框 -->
      <div class="time-container">
        <div class="current-time">
          <span class="date-text">{{ formattedDate }}</span>
          <br/>
          <span class="time-text">{{ formattedTime }}</span>
        </div>
      </div>

      <div class="title">
        <el-badge :value="10" type="primary" class="remind">
          <i class="el-icon-bell"></i>
        </el-badge>
        <el-dropdown @command="handleUserAction">
          <span class="user-info">
            <el-avatar :src="userinfo.avatar"></el-avatar>
            <span>{{ userinfo.nickName }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="profile">个人信息</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <!-- 主体 -->
    <el-container>
      <!-- 左侧菜单 -->
      <el-aside class="aside">
        <el-menu
          :default-active="currentActive"
          class="el-menu-vertical"
          @select="asideStyle"
          :unique-opened="true"
        >
          <!-- 首页 -->
          <el-menu-item index="Index" :class="{ active: currentActive === 'Index' }" @click="goIndex">
            <img
              style="width: 20px"
              class="menu-icon"
              :src="require('@/assets/fonticon/container/currentActive.svg')"
              :class="{ 'icon-active': currentActive === 'Index' }"
              alt="首页"
            />
            <span>首页</span>
          </el-menu-item>

          <el-menu-item index="Meeting" :class="{ active: currentActive === 'Meeting' }" @click="goMeeting">
            <img
              style="width: 20px"
              class="menu-icon"
              :src="require('@/assets/fonticon/container/meeting.svg')"
              :class="{ 'icon-active': currentActive === 'Meeting' }"
              alt="会议"
            />
            <span>视频会议</span>
          </el-menu-item>

          <el-menu-item index="Dates" :class="{ active: currentActive === 'Dates' }" @click="goDates">
            <img
              style="width: 20px"
              class="menu-icon"
              :src="require('@/assets/fonticon/container/dates.svg')"
              :class="{ 'icon-active': currentActive === 'Dates' }"
              alt="日程"
            />
            <span>日历</span>
          </el-menu-item>
          <el-menu-item index="chat" :class="{ active: currentActive === 'chat' }" @click="goChat">
            <img
              style="width: 20px"
              class="menu-icon"
              :src="require('@/assets/fonticon/container/deepseek.svg')"
              :class="{ 'icon-active': currentActive === 'chat' }"
              alt="ai助手"
            />
            <span>ai助手</span>
          </el-menu-item>


          <el-menu-item index="Task" :class="{ active: currentActive === 'Task' }" @click="goTask">
            <img
              style="width: 20px"
              class="menu-icon"
              :src="require('@/assets/fonticon/container/task.svg')"
              :class="{ 'icon-active': currentActive === 'Task' }"
              alt="任务管理"
            />
            <span>任务管理</span>
          </el-menu-item>


          <el-menu-item index="first" :class="{ active: currentActive === 'first' }" @click="goForum">
            <i class="iconfont el-jiaoliu" :style="{ fontSize: 25+ 'px' ,color: '#000'}" style="width: 30px"></i>
            <span>交流社</span>
          </el-menu-item>
          <!-- 文档 - 带子菜单 -->
          <el-submenu index="1">
            <template slot="title">
              <i class="iconfont el-wendang" :style="{ fontSize: 25+ 'px' ,color: '#000'}" style="width: 20px;margin-left: 20px;"></i>
              <span style="margin-left: 5px">文档</span>
            </template>
            <el-menu-item index="1-1" @click="goSearch">知识搜索</el-menu-item>
            <el-menu-item index="1-3" :class="{ active: currentActive === 'knowledge' }" @click="goKnowledgeBase">知识库</el-menu-item>
            <el-submenu index="13">
              <template slot="title">与我有关</template>
              <el-menu-item index="collect" :class="{ active: currentActive === 'collect' }" @click="goCollect">
                收藏
              </el-menu-item>
              <el-menu-item index="share" :class="{ active: currentActive === 'share' }" @click="goShare">
                分享
              </el-menu-item>
            </el-submenu>
            <el-menu-item @click="goRecycleBin" index="1-3">回收站</el-menu-item>
          </el-submenu>
          <!--导航加-->
        </el-menu>
      </el-aside>

      <!-- 内容区 -->
      <el-main>
        <transition name="fade" mode="out-in">
          <router-view/>
        </transition>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
import { getInfo } from '@/api/login'
import "@/assets/document/iconfont.css"

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Container',
  data () {
    return {
      currentActive: '',
      searchQuery: '',
      userinfo: {
        nickName: '',
        avatar: ''
      },
      date: new Date(),
      timeInterval: null
    }
  },
  created () {
    this.fetchUserInfo()
    this.startTimeUpdate()
  },
  beforeDestroy () {
    clearInterval(this.timeInterval)
  },
  computed: {
    formattedDate () {
      const d = this.date
      const year = d.getFullYear()
      const month = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')
      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const weekDay = weekDays[d.getDay()]
      return `${year}年${month}月${day}日 ${weekDay}`
    },
    formattedTime () {
      const d = this.date
      const hours = String(d.getHours()).padStart(2, '0')
      const minutes = String(d.getMinutes()).padStart(2, '0')
      const seconds = String(d.getSeconds()).padStart(2, '0')
      return `${hours}:${minutes}:${seconds}`
    }
  },
  methods: {
    goSearch(){
      if (this.$route.path !== '/office/search') {
        this.$router.push({ name: 'search' })
      }
    },
    goChat(){
      if (this.$route.path !== '/office/ChatWindow') {
        this.$router.push({ name: 'ChatWindow' })
      }
    },
    goKnowledgeBase(){
      if (this.$route.path !== '/office/KnowledgeBase') {
        this.$router.push({ name: 'KnowledgeBase' })
      }
    },
    goRecycleBin(){
      if (this.$route.path !== '/office/RecycleBin') {
        this.$router.push({ name: 'RecycleBin' })
      }
    },
    goShare(){
      if (this.$route.path !== '/office/share') {
        this.$router.push({ name: 'share' })
      }
    },
    goForum () {
      if (this.$route.path !== '/office/first') {
        this.$router.push({ name: 'first' })
      }
    },
    goDates () {
      if (this.$route.name !== 'Dates') {
        this.$router.push({ name: 'Dates' })
      }
    },
    goIndex () {
      if (this.$route.path !== '/office/index') {
        this.$router.push({ name: 'Index' })
      }
    },
    goMeeting () {
      if (this.$route.path !== '/office/meeting') {
        this.$router.push({ name: 'Meeting' })
      }
    },
    goCollect () {
      if (this.$route.path !== '/office/collect') {
        this.$router.push({ name: 'collect' })
      }
    },
    goTask () {
      if (this.$route.path !== '/office/task') {
        this.$router.push({ name: 'Task' })
      }
    },
    asideStyle (index) {
      this.currentActive = index
    },
    fetchUserInfo () {
      this.currentActive = this.$route.name  // 默认激活首页

      this.userinfo.avatar = this.$store.getters.avatar
      this.userinfo.nickName = this.$store.getters.nickName

    },
    startTimeUpdate () {
      this.timeInterval = setInterval(() => {
        this.date = new Date()
      }, 1000)
    },
    handleUserAction (command) {
      if (command === 'logout') {
        this.$confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sessionStorage.clear()
          this.$router.push('/login')
        })
      } else if (command === 'profile') {
        this.$router.push('/office/profile')
      }
    }
  }
}
</script>

<style scoped>
.doc-manager-container {
  margin: 0;
  padding: 0;
}

.context-header {
  padding: 0;
  height: auto;
  position: sticky;
  top: 60px; /* Height of the main-header */
  z-index: 1001;
}

/* 头部样式 */
.main-header {
  position: sticky;
  top: 0;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
  background-color: #fff;
}

.logo {
  position: absolute;
  left: 63px;
  top: 15px;
  width: 35px;
}

.header {
  font-weight: 800;
  font-size: 22px;
  color: #545559;
  margin-left: 85px;
}

.search-input {
  width: 600px;
  margin: 0 auto;
}


.title {
  display: flex;
  align-items: center;
}

.remind {
  cursor: pointer;
  margin-right: 30px;
  font-size: 18px;
}

.remind .el-icon-bell {
  font-size: 20px;
  color: #666;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 20px;
}

.user-info span {
  margin: 0 8px;
}

.aside {
  height: 100%;
  border-right: 1px solid #eee;
  background-color: #fff;
}


.el-menu-vertical {
  border-right: none;
}

.el-menu-vertical .el-menu-item {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  color: #6c7889;
  display: flex;
  align-items: center;
  padding-left: 30px !important;
  transition: all 0.3s ease;
  border-radius: 10px;
  margin: 10px;
}

.menu-icon {
  margin-right: 8px;
  vertical-align: middle;
  transition: all 0.3s ease;
  filter: brightness(1); /* 防止被其他滤镜影响 */
}

.icon-active {
  filter: brightness(0) saturate(100%) invert(44%) sepia(72%) saturate(2170%) hue-rotate(192deg) brightness(100%) contrast(100%);
  filter: brightness(0) saturate(100%) invert(44%) sepia(72%) saturate(2170%) hue-rotate(192deg) brightness(100%) contrast(100%) !important;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.el-menu-vertical .el-menu-item.active {
  background-color: #f0f5ff !important;
  color: #40a3ff !important;
  font-weight: bold;
}

.time-container {
  font-size: 14px;
  color: #666;
  margin-right: 50px;
  text-align: center;
  float: right;
}

.current-time {
  font-weight: normal;
  float: right;
}

.date-text {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.time-text {
  font-size: 14px;
  color: #888;
}

.el-menu-vertical .el-menu-item:hover {
  background-color: #f8faff;
}

</style>
